<template>
  <div style="width: 100%">
    <el-row v-if="memberDetails.member">
      <el-col :span="8">
        <div class="name-content"/>
      </el-col>
      <el-col :span="8">
        <div class="Ttitle backColor">
          {{ memberDetails.member.name }}同学的成长记录
        </div>
      </el-col>
      <el-col :span="8">
        <div class="name-content"/>
      </el-col>
    </el-row>

    <el-row v-if="memberDetails.member">
      <el-col :span="6">
        <div class="grid-content"/>
      </el-col>
      <el-col :span="6" class="backColor">
        <div class="grid-content">
          <div class="demo-fit avatar-container">
            <div class="block" :key="fit">
              <el-avatar shape="square" :size="250" :fit="fit" :src="memberDetails.member.pictureUrl"></el-avatar>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content backColor">
          <div class="memberDetail">
            <div>姓名: {{ memberDetails.member.name }}</div>
            <div>专业: {{ memberDetails.member.major }}</div>
            <div>加入时间: {{ memberDetails.member.joinTime }}</div>
            <div>擅长: {{ memberDetails.member.expertise }}</div>
            <div>成绩效: {{ memberDetails.member.totalScore }}</div>
            <div>就职单位: {{ memberDetails.member.employmentCompany }}</div>
            <div>联系方式: {{ memberDetails.member.phone }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content backColor1"/>
      </el-col>
    </el-row>

    <el-row v-if="activities.length > 0">
      <el-col :span="12" :offset="6">
        <div class="backColor">
          <div class="block timeline">
            <el-timeline :reverse="reverse">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                placement="top"
                :timestamp="activity.timestamp">
                <div class="timeline-content">
                  {{ activity.content }}
                </div>
                <div style="margin-left: 55%">
                  <el-avatar class="timeline-avatar" shape="square" :size="150" :fit="cover" :src="activity.pictureUrl"></el-avatar>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>

 import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/team/info";

export default {
  data() {
    return {
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 是否显示弹出层
      open: false,

      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      memberId: null,
      // 头像
      fit: 'fill',

      // 详细信息
      memberDetails: {
        name: '', // 初始化name属性
        pictureUrl: '',
        major: '',
        joinTime: '',
        expertise: '',
        totalScore: '',
        employmentCompany: '',
        phone: '',
        member:[],
        productList: [],
        gameList: []
      },
      // 是否倒叙显示
      reverse: false,
      // 刷新

    }
  },
  computed: {

    activities() {
      // 格式化时间为“年年年年月月”的格式
      const formatTimestamp = (timestamp) => {
        // 如果时间是类似 "2023.10" 的格式（带小数点），先处理为 Date 对象
        let date;
        if (timestamp.includes('.')) {
          const [year, month] = timestamp.split('.');
          date = new Date(`${year}-${month}-01`); // 创建一个类似 "2023-10-01" 的日期
        } else {
          // 如果时间已经是类似 "2023年12月" 这种格式，直接转换
          const yearMonth = timestamp.replace('年', '-').replace('月', '');
          date = new Date(yearMonth); // 创建一个类似 "2023-12" 的日期
        }

        const year = date.getFullYear();
        const month = date.getMonth() + 1; // getMonth() 返回的月份从0开始，所以需要 +1
        return `${year}年${month}月`;
      };


      // 合并 productList 和 gameList，并为每项加上时间戳和内容
      const productActivities = this.memberDetails.productList.map(item => ({
        timestamp: formatTimestamp(item.productTime),
        pictureUrl: item.pictureUrl,
        content: `参加了${item.productName}项目的开发`
      }));

      const gameActivities = this.memberDetails.gameList.map(item => ({
        timestamp: formatTimestamp(item.gameTime),
        content: `在 ${item.gameName} 比赛中获得 ${item.gameResult}`
      }));

      // 合并两个数组并按时间排序
      const activities = [...productActivities, ...gameActivities];
      return activities.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
    }
  },
  beforeMount() {
    // 如果没有找到标志或者标志已过期
    if (!sessionStorage.getItem('hasRefreshed')) {
      // 设置刷新标记，避免再次刷新
      sessionStorage.setItem('hasRefreshed', 'true');
      // 进行刷新
      window.location.reload();
    } else {
      // 如果已经刷新过，将标记移除，这样下一次页面刷新会重新触发刷新逻辑
      sessionStorage.removeItem('hasRefreshed');
    }
  },

  mounted() {

    const id = this.$route.query.id;  // 获取 id 值，假设它是 "uuid-1"
    this.getMemberDetails(id);
  },
  methods: {
    async getMemberDetails(numericId) {
      this.loading = true; // 开始加载
      try {
        const response = await getInfo(numericId); // 调用 listInfo 方法并等待响应
        this.memberDetails.member = response.data;
        this.memberDetails.productList = response.data.mProductCenterList;
        this.memberDetails.gameList = response.data.mGameRecordList;
        console.log("this.memberDetails.member")
        console.log(this.memberDetails.member )
      } catch (error) {
        console.error('Error fetching members:', error); // 处理错误
      } finally {
        this.loading = false; // 结束加载
      }
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listInfo(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          console.log(response.rows)
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },

  },

}
</script>

<style lang="scss" scoped>
.body {
  display: flex;
  flex-direction: column; /* 使子元素垂直排列 */
  // background-color: rgb(255, 255, 255);
  background-image: url(../../assets/images/bac.jpg);
  width: 100%;
  height: auto;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: center; /* 背景图居中 */
  background-attachment: fixed; /* 背景图固定，不随页面滚动 */
}

.header {
  background-color: #94070a;
  width: 100%;
  height: 28px;

}

.tablebar {
  display: flex;
  height: 95px;
  width: 95%;
  margin: 0 auto;
  align-items: center; /* 垂直居中 */
}

.main {
  width: 95%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 auto; /* 使 .main 水平居中 */
  position: relative; /* 添加相对定位以使图标绝对定位相对于 .main */
}

.logo {
  background-image: url(../../assets/images/cksys.png);
  width: 8%;
  height: 96%;
  background-size: cover; /* 图片正好填充 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中 */
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%;
  height: 85%;
  // font-size: 10%;
  // background-color: #ffffff;
  position: relative;
  font-weight: 600;
}

.school {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column; /* 使文本元素上下排列 */
  align-items: center; /* 垂直居中对齐 */
  font-size: clamp(5px, 6vw, 18px); // 使用 clamp 函数调整字体大小
}

#chinese {
  margin-right: 2%;
}

/* lab元素右下对齐 */
.lab {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column; /* 使文本元素上下排列 */
  align-items: center; /* 垂直居中对齐 */
  font-size: clamp(5px, 6vw, 17px); // 使用 clamp 函数调整字体大小
}

.barList {
  display: flex;
  justify-content: space-between; /* 子元素均匀分布 */
  width: 60%;
  height: 100%;
  margin-left: auto;
}

#bar {
  height: 100%;
  width: 15%;
  text-align: center; /* 文字水平居中 */
  display: flex;
  align-items: center; /* 文字垂直居中 */
  justify-content: center; /* 文字水平居中 */
  padding-top: 0; /* 移除原来的 padding-top */
  font-weight: 600;
  font-size: 2vh;
}

#bar:hover {
  background-color: rgba(255, 255, 255, 0.5); /* 白色透明背景 */
}

.el-icon-full-screen {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: 3%;
}

.el-icon-full-screen:hover {
  color: #ffffff;
}


/*成长记录*/
.name-content{
  min-height: 36px;
  height: 50px;
}
.grid-content {
  /*border-radius: 4px;*/
  min-height: 36px;
  height: 220px;
}

/*背景白色*/
.backColor {
  /*background-color: white;*/
}

/*页面标题*/
.Ttitle {
  font-size: 30px;
  height: 100px;
  width: 100%;
  text-align: center; /* 文字水平居中 */
  display: flex;
  align-items: center; /* 文字垂直居中 */
  justify-content: center; /* 文字水平居中 */
}

.avatar-container {
  margin-left: 15%;
  padding-bottom: 3%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 覆盖 .el-avatar 样式，使图片适应容器 */
.el-avatar {
  width: 100%; /* 让头像容器宽度适应父容器 */
  height: 100%; /* 让头像容器高度适应父容器 */
  overflow: hidden; /* 隐藏超出的部分 */
}

.el-avatar img {
  object-fit: cover; /* 确保图片保持比例并完全覆盖容器 */
  width: 100%; /* 使图片的宽度适应容器 */
  height: 100%; /* 使图片的高度适应容器 */
}
/*详细详细*/
.memberDetail {
  font-size: 25px;
  margin-left: 30%;
  padding-bottom: 7.4%;
}

/*时间线*/
.timeline {
  margin-left: 5%;
  padding-top: 10%;
}

.timeline-content {
  color: #333;
  font-size: 20px;

}
/* 使用 ::v-deep 修改时间戳样式 */
::v-deep .el-timeline-item__timestamp {
  font-size: 18px;

  color: black; /* 自定义时间戳颜色 */
}

</style>
